<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面</title>
	<link rel="stylesheet" href="./layui/css/layui.css">
	<script src="./layui/layui.js"></script>
</head>
<body>
	<ul class="layui-nav" lay-filter="">
	  <li class="layui-nav-item"><a href="">最新活动</a></li>
	  <li class="layui-nav-item layui-this">
	  	<a href="javascript:;">产品</a>
	    <dl class="layui-nav-child"> <!-- 二级菜单 -->
	      <dd><a href="">移动模块</a></dd>
	      <dd><a href="">后台模版</a></dd>
	      <dd><a href="">电商平台</a></dd>
	    </dl>
	  </li>
	  <li class="layui-nav-item"><a href="">大数据</a></li>
	  <li class="layui-nav-item">
	    <a href="javascript:;">解决方案</a>
	    <dl class="layui-nav-child"> <!-- 二级菜单 -->
	      <dd><a href="">移动模块</a></dd>
	      <dd><a href="">后台模版</a></dd>
	      <dd><a href="">电商平台</a></dd>
	    </dl>
	  </li>
	  <li class="layui-nav-item"><a href="">社区</a></li>
	</ul>

	<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" required lay-verify="email" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">辅助文字</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">出生日期</label>
    <div class="layui-input-inline">
      <input type="text" id="xbsdate" name="text" required lay-verify="required"autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">出生日期</label>
    <div class="layui-input-inline">
      <input type="text" id="xbsdate1" name="text" required lay-verify="required"autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

	<button class="layui-btn layui-btn-normal" id="btn">点击 </button>

	<div class="layui-carousel" id="xbsbanner">
	  <div carousel-item>
	    <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554877169832&di=3306fce04b6926d7529610c865dfa4b5&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F5365991b42a13.jpg" alt=""></div>
	    <div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554877187759&di=3ff02dd6f74e3b005fdb52b4a05cabee&imgtype=0&src=http%3A%2F%2Fwww.33lc.com%2Farticle%2FUploadPic%2F2012-8%2F2012889554980111.jpg" alt=""></div>
	    <div>条目3</div>
	    <div>条目4</div>
	    <div>条目5</div>
	  </div>
	</div>

	<script>
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	layui.use(['element','form','laydate','carousel','layer','jquery'], function(){
	   var element = layui.element;
	   var form = layui.form;
	   var laydate = layui.laydate;
	   var carousel = layui.carousel;
	   var layer = layui.layer;
	   var $ = layui.jquery;


	   $('#btn').click(function(event) {
	  		
	  		layer.open({
			  type: 2,
			  shade: [0],
			  area: ['80%', '300px'],
			  anim: 2,
			  content: ['http://www.baidu.com', 'no']
			});
	   });

	  
	  	laydate.render({
		    elem: '#xbsdate' //指定元素
		});

		laydate.render({
		    elem: '#xbsdate1' //指定元素
		});

		 carousel.render({
		    elem: '#xbsbanner'
		    ,width: '100%' //设置容器宽度
		    ,arrow: 'always' //始终显示箭头
		    //,anim: 'updown' //切换动画方式
		  });
	});

	</script>
</body>
</html>